<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class-and-style</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app1"
    class="static"
    v-bind:class="{active:isActive,'text-danger':hasError}"
></div>
<div id="app2" v-bind:class="classObject"></div>
<div id="app3" v-bind:class="classObject"></div>
<div id="app4" v-bind:class="[activeClass,errorClass]"></div>
<div id="app5" v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
<div id="app6"><my-component v-bind:class="{active:isActive}"></my-component></div>
<div id="app7" v-bind:style="{color:activeColor,fontSize:fontSize+'px'}">测试1</div>
<div id="app8" v-bind:style="styleObject">测试2</div>
</body>
<script type="text/javascript">
    var app1=new Vue({
        el:"#app1",
        data:{
            isActive:true,
            hasError:false
        }
    })
    var app2=new Vue({
        el:'#app2',
        data:{
            classObject:{
                static:true,
                active:true,
                'text-danger':false
            }
        }
    })
    var app3=new Vue({
        el:'#app3',
        data:{
            isActive:true,
            error:null
        },
        computed:{
            classObject:function(){
                return{
                    active:this.isActive && !this.error,
                    'text-danger':this.error && this.error.type==='fatal'
                }
            }
        }
    })
    var app4=new Vue({
        el:'#app4',
        data:{
            activeClass:'active',
            errorClass:'text-danger'
        }
    })
    var app5=new Vue({
        el:'#app5',
        data:{
            isActive:true,
            activeClass:"active",
            errorClass:"text-danger"
        }
    })
    Vue.component('my-component',{
        template:'<p class="foo bar">Hi</p>'
    })
    var app6=new Vue({
        el:'#app6',
        data:{
            isActive:true
        }
    })
    var app7=new Vue({
        el:'#app7',
        data:{
            activeColor:'red',
            fontSize:30
        }
    })

    var app8=new Vue({
        el:'#app8',
        data:{
            styleObject:{
                color:'red',
                fontSize:'30px'
            }
        }
    })
</script>
</html>